<template>
  <el-container>
    <el-aside class="layout layout-aside" style="min-width:64px;width:auto;max-width:200px;">
       <div class="layout layout-top-logo-box">
           <a href="#/home" class="layout layout-top-logo">miaoui</a>
      </div>
      <el-sub :isCollapse="isCollapse"></el-sub>
    </el-aside>
    <el-container>
      <el-header class="layout layout-top-header">
        <i class=" iconfont isExpand icon-expand" v-bind:class="{'icon-expand':isCollapse,'icon-collapse':!isCollapse}" @click="expandSubmenu"></i>
        <!-- <el-nav class="layout layout-top-nav"></el-nav> -->
      </el-header>
      <el-main>
        <transition name="slideInRight">
          <router-view></router-view>
        </transition>

      </el-main>
      <el-footer>footer</el-footer>
    </el-container>
  </el-container>
</template>
<style scoped>
.slideInRight-enter-active {
  animation: slideInRight .5s ease-in-out;
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

</style>

<script>
import elNav from './el-nav.vue';
import elSubmenu from './el-submenu.vue';
export default {
    components:{
      'el-nav':elNav,
      'el-sub':elSubmenu
    },
    data() {
      return {
        isCollapse:true,
      };
    },
    methods: {
      expandSubmenu(){
        this.isCollapse=!this.isCollapse;
      }
    }
};
</script>

